<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 410px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button id="btn">点击创建拼接元素</button>
        <button id="btn1">删除第一个元素</button>
        <button id="btn2">点击插入元素为第二个元素</button>
        <button id="btn3">点击插入元素为倒数第二个元素</button>
        <div id="box"></div>
    </div>
</body>
<script>
    let arr = ['../image/1.jpg', '../image/2.jpg', '../image/3.png', '../image/4.jpg']

    function getElement() {
        //1.创建图片元素
        let img = document.createElement('img');
        console.log(img);
        //2.设置属性 Math.fool 截取
        let index = Math.floor(Math.random() * arr.length);
        img.setAttribute('src', arr[index]);
        img.style.width = '100px';
        img.style.margin = '10px';
        return img;

    }
    //拼接元素
    btn.onclick = function () {
        console.log(this);
        //3.img放到box里的最后  添加元素 父子关系
        box.appendChild(getElement());
    }

    //删除元素
    btn1.onclick = function () {
        let firstEL = box.firstElementChild;
        //父级元素.removeChild(直接子元素)
        //box.removeChild(box.lastElementChild)
        box.removeChild(firstEL);
    }

    //插入元素到元素后 after(),在当前元素之后追加（是同级关系）  
    btn2.onclick = function () {
        let firstEL = box.firstElementChild;
        //得到图片的函数 
        let img = getElement();
        if (firstEL) {
            firstEL.after(img);
        } else {
            box.appendChild(img);
        }
    }

    //before(),在当前元素之前追加（是同级关系）  
    btn3.onclick = function () {
        let lastEL = box.lastElementChild
        //得到图片的函数
        let img = getElement();
        //lastEL元素前是img
        if (lastEL) {
            lastEL.before(img)
        } else {
            box.appendChild(img)
        }
    }

</script>

</html>